<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Lv technology Blog</title>
<!--
Classic Template
http://www.cssmoban.com/tm-488-classic
-->

    <link rel="stylesheet" href="../file/css/bootstrap.min.css">      <!-- Bootstrap style -->
    <link rel="stylesheet" href="../file/css/templatemo-style.css">           <!-- Templatemo style -->
    <!-- <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> --> 
    <!-- 代码展示插件 -->
    <link rel="stylesheet" href="file/code_high/styles/dark.css">
    <script src="file/code_high/highlight.pack.js"></script>
    <!-- 初始化 -->
    <script>hljs.initHighlightingOnLoad();</script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
          <![endif]-->
    <style type="text/css">
        pre{
            border-radius: 10px;
        }
    </style>
</head>

    <body>
       
        <div class="tm-header">
            <div class="container-fluid">
                <div class="tm-header-inner">
                    <a href="../blog_index.html" class="navbar-brand tm-site-name">绿绿峰</a>
                    
                    <!-- navbar -->
                    <nav class="navbar tm-main-nav">

                        <button class="navbar-toggler hidden-md-up" type="button" data-toggle="collapse" data-target="#tmNavbar">
                            &#9776;
                        </button>
                        
                        <div class="collapse navbar-toggleable-sm" id="tmNavbar">
                            <ul class="nav navbar-nav">
                                <li class="nav-item active">
                                    <a href="te_blog_index.html" class="nav-link">【技术】</a>
                                </li>
                                <li class="nav-item">
                                    <a href="../life/li_blog_index.html" class="nav-link">生活</a>
                                </li>
                                <li class="nav-item">
                                    <a href="../hobby/ho_blog_index.html" class="nav-link">爱好</a>
                                </li>
                                <li class="nav-item">
                                    <a href="../talk/ta_blog_index.html" class="nav-link">杂谈</a>
                                </li>
                            </ul>                        
                        </div>
                        
                    </nav>  

                </div>                                  
            </div>            
        </div>

        <div class="tm-blog-img-container">
            <!-- banner图片 -->
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533715900619&di=1ba02070565460ee8fa98d6082833b27&imgtype=0&src=http%3A%2F%2Fwww.cqnenya.com%2FUploads%2Fattach%2Fimage%2F20160409%2F5708b1ee4233e.jpg" width="100%" height="260">
        </div>

        <section class="tm-section">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
                        <div class="tm-blog-post">
                            <h3 class="tm-gold-text">代码高亮插件HighLight的使用心得</h3>
                            <p>日常在代码显示和在html中展现的时候，常常会因为格式造成可读性一般。因此，出来了它。</p>
                            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533740798631&di=0eeac759e43045bf09312957e888b439&imgtype=0&src=http%3A%2F%2Fd.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F1ad5ad6eddc451da02496daeb7fd5266d0163233.jpg" alt="代码" class="img-fluid tm-img-post">
                            <p>上图，引用自百度；一个最棒的笔记本“sublime”的样式</p><hr>
                            <p>首先，我们需要在html文档中引入下面这样的文件：先下载好，右侧目录有链接</p>
                            <pre><code>    &lt;head&gt;
        &lt;title&gt;高亮&lt;/title&gt;
        &lt;meta http-equiv="content-type" content="text/html;charset=utf-8"&gt;
        &lt;!-- 样式表可以根据自己喜好配置 --&gt;
        &lt;link rel="stylesheet" href="styles/default.css"&gt;
        &lt;!-- 主JS文件 --&gt;
        &lt;script src="highlight.pack.js"&gt;&lt;/script&gt;
        &lt;script&gt;hljs.initHighlightingOnLoad();  //初始化&lt;/script&gt;
    &lt;/head&gt;</code></pre>
                            <p>当然，这个例子就是这样做的~</p>
                            <p>加了一个可爱萌萌哒圆角</p>
                        </div>
                        
                        <div class="row tm-margin-t-big">
                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="../file/image/tm-img-310x180-1.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">文章 #1</h4>
                                    <p class="tm-margin-b-20">描述</p>
                                    <a href="#" class="tm-btn text-uppercase">详情</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="../file/image/tm-img-310x180-2.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">文章 #2</h4>
                                    <p class="tm-margin-b-20">这是一小段描述</p>
                                    <a href="#" class="tm-btn text-uppercase">详情</a>    
                                </div>  

                            </div>

                            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">

                                <div class="tm-content-box">
                                    <img src="../file/image/tm-img-310x180-3.jpg" alt="Image" class="tm-margin-b-30 img-fluid">
                                    <h4 class="tm-margin-b-20 tm-gold-text">文章 #3</h4>
                                    <p class="tm-margin-b-20">你我无缘</p>
                                    <a href="#" class="tm-btn text-uppercase">详情</a>    
                                </div>  

                            </div>    
                        </div>
                        
                    </div>

                    <aside class="col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3 tm-aside-r">

                        <div class="tm-aside-container">
                            <h3 class="tm-gold-text tm-title">
                                代码高亮插件下载地址
                            </h3>
                            <nav>
                                <ul class="nav">
                                    <li><a href="https://highlightjs.org/download/" target="_blank" class="tm-text-link">HightLight Download</a></li>
                                    <li><a href="https://highlightjs.org/" target="_blank" class="tm-text-link">官网简介</a></li>
                                   
                                </ul>
                            </nav>
<!--                             <hr class="tm-margin-t-small">   
                            <h3 class="tm-gold-text tm-title tm-margin-t-small">
                                第二部分
                            </h3>
                            <nav>   
                                <ul class="nav">
                                    <li><a href="#" class="tm-text-link">角色</a></li>
                                    <li><a href="#" class="tm-text-link">挑战</a></li>
                                    <li><a href="#" class="tm-text-link">坚持</a></li>
                                </ul>
                            </nav>  -->  
<!--                             <hr class="tm-margin-t-small"> 

                            <div class="tm-content-box tm-margin-t-small">
                                <a href="#" class="tm-text-link"><h4 class="tm-margin-b-20 tm-thin-font">描述 #1</h4></a>
                                <p class="tm-margin-b-30">可以随笔一些</p>
                            </div>
                            <hr class="tm-margin-t-small">
                            <div class="tm-content-box tm-margin-t-small">
                                <a href="#" class="tm-text-link"><h4 class="tm-margin-b-20 tm-thin-font">描述 #2</h4></a>
                                <p>新加点内容</p>
                            </div>   -->     
                        </div>
                        
                        
                    </aside>

                </div>
                
            </div>
        </section>
        
        <footer class="tm-footer">
            <div class="container-fluid">
                <div class="row">
                    
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                        
                        <div class="tm-footer-content-box">
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">HighLight</h3>
                            <div class="tm-gray-bg">
                                <p>展示你的代码</p>
                                <p>显得高大上~</p>
                                <p><strong>LvLvFeng</strong></p>    
                            </div>    
                        </div>
                                                
                    </div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">
                        <div class="tm-footer-content-box tm-footer-links-container">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">友情链接</h3>
                            <nav>
                                <ul class="nav">
                                    <li><a href="https://blog.csdn.net/u012906135/article/details/51605365" class="tm-footer-link" target="_blank">CSDN上简介</a></li>
                                    <li><a href="https://www.baidu.com" target="_blank" class="tm-footer-link">不会则百度一下吧</a></li>
                                </ul>
                            </nav>

                        </div>
                        
                    </div>

                    <!-- Add the extra clearfix for only the required viewport 
                        http://stackoverflow.com/questions/24590222/bootstrap-3-grid-with-different-height-in-each-item-is-it-solvable-using-only
                    -->
                    <div class="clearfix hidden-lg-up"></div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                        <div class="tm-footer-content-box">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">援引文章</h3>
                            <p class="tm-margin-b-30">
                                <a href="https://www.cnblogs.com/ermu-learn/p/5993025.html" class="tm-footer-link" target="_blank">博客园——高亮你的代码</a>
                            </p>
                            <p class="tm-margin-b-30"><a href="https://www.cnblogs.com/moqiutao/p/6541089.html" class="tm-footer-link" target="_blank">博客园——高亮你的代码2</a></p>
                            <!-- <a href="#" class="tm-btn tm-btn-gray text-uppercase">查看更多</a> -->

                        </div>
                        
                    </div>

                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-3 col-xl-3">

                        <div class="tm-footer-content-box">
                        
                            <h3 class="tm-gold-text tm-title tm-footer-content-box-title">~小编公众号~</h3>
                            <div class="tm-margin-b-30">
                                <img src="../file/image/qr.png" alt="Image" class="tm-footer-thumbnail">
                                <!-- <img src="../file/image/tm-img-100x100-2.jpg" alt="Image" class="tm-footer-thumbnail"> -->
                            </div>
                            <p class="tm-margin-b-20">戳下面下载</p>
                            <a href="https://highlightjs.org/" target="_blank" class="tm-btn tm-btn-gray text-uppercase">下载本插件</a>

                        </div>
                        
                    </div>


                </div>

                <div class="row">
                    <div class="col-xs-12 tm-copyright-col">
                        <p class="tm-copyright-text">Copyright 2018 LvFeng Blog</p>
                    </div>
                </div>
            </div>
        </footer>

        <!-- load JS files -->
        <script src="../file/js/jquery.min.js"></script>             <!-- jQuery (https://jquery.com/download/) -->
        <script src="../file/js/tether.min.js"></script>
        <!-- <script src="https://www.atlasestateagents.co.uk/javascript/tether.min.js"></script> --> <!-- Tether for Bootstrap, http://stackoverflow.com/questions/34567939/how-to-fix-the-error-error-bootstrap-tooltips-require-tether-http-github-h --> 
        <script src="../file/js/bootstrap.min.js"></script>                 <!-- Bootstrap (http://v4-alpha.getbootstrap.com/) -->
       
</body>
</html>